import React, {Component} from 'react';
import './index.css';

export default class List extends Component {
	render() {
		const {users, isLoading, err} = this.props;

		return (
			<div className="row">
				{isLoading ? (
					<h1>加载中...</h1>
				) : err ? (
					<h1 style={{color: 'red'}}>请求错误</h1>
				) : (
					users.map(item => {
						return (
							<div className="card" key={item.id}>
								<a rel="noreferrer" href={item.html_url} target="_blank">
									<img
										alt="head portrait"
										src={item.avatar_url}
										style={{width: '100px'}}
									/>
								</a>
								<p className="card-text">{item.login}</p>
							</div>
						);
					})
				)}
			</div>
		);
	}
}
